<template>
  <div>
    <el-card class="box-card">
      <div class="text item">
        <el-row>
          <el-col :span="24">
            <el-row>
              <el-col :span="20">
                <el-input class="searchName" v-model="projectName" placeholder="请输入相关搜索条件"
                  style="margin-top: 40px; margin-left: 20px">
                </el-input>
              </el-col>
              <el-col :span="4">
                <el-button class="el-icon-search" @click="show()" type="primary"
                  style="margin-top: 40px; margin-left: 20px">
                </el-button>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-row>
              <el-col :span="17">&nbsp;</el-col>
              <el-col :span="7">
                <el-button>分配专家</el-button>
                <el-button>删除未评审专家</el-button>
                <el-button>导出</el-button></el-col>
            </el-row>
          </el-col>
        </el-row>
        <hr />
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%; margin-top: 10px"
          @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column label="项目名称" prop="projectName">
            <template #default="scope">
              <span style="color: rgb(76, 76, 252)" @click="Go()">
                {{ scope.row.projectName }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="declarantName" label="申报人"></el-table-column>
          <el-table-column prop="dicValue" label="项目来源单位"></el-table-column>
          <el-table-column prop="declarationTime" label="申报时间">
            <template #default="scope">
              {{ scope.row.declarationTime }}
            </template>
          </el-table-column>
          <el-table-column prop="progress" label="项目进度">
            <template #default="scope">
              <span v-if="scope.row.progress == '管理员初审'" style="color:green">{{ scope.row.progress }} </span>
              <span v-if="scope.row.progress == '管理员终审'" style="color:red">{{ scope.row.progress }} </span>
              <span v-if="scope.row.progress == '专家评审'" style="color:red">{{ scope.row.progress }} </span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              
              <span v-if="scope.row.progress == '管理员初审'">
                <el-link v-for="(item, index) in scope.row.operate" :key="index" size="mini" type="warning"
                  @click="Audit(index, item, scope.row.projectID)">{{ item.Name }}</el-link>&nbsp;
              </span>
              <span v-if="scope.row.progress == '专家评审'">
                <el-link type="warning" @click="dataexpert(scope.$index, scope.row)">分配专家</el-link>&nbsp;
              </span>
              <el-link type="danger" @click="databack(scope.$index, scope.row)"> 退回 </el-link>
              &nbsp;
              <el-link @click="dataedit(scope.$index, scope.row)">详情</el-link>
              &nbsp;
              <el-link type="danger" @click="dataedelete(scope.$index, scope.row)">删除</el-link>
            </template>
          </el-table-column>
        </el-table>
        <el-dialog title="详情" v-model="dialogPutVisible">
          <el-descriptions direction="vertical" :column="3" border>
            <el-descriptions-item label="项目名称">
              {{ ruleForms.projectName }}
            </el-descriptions-item>
            <el-descriptions-item label="申报人">
              {{ ruleForms.declarantName }}
            </el-descriptions-item>
            <el-descriptions-item label="申报人工号">
              {{ ruleForms.declarantID }}
            </el-descriptions-item>
            <el-descriptions-item label="申报人出生年月">
              {{ ruleForms.declarantBirthday }}
            </el-descriptions-item>
            <el-descriptions-item label="申报人手机号">{{
              ruleForms.declarantTel
            }}</el-descriptions-item>
            <el-descriptions-item label="申报人身份证号">{{
              ruleForms.declarantCard
            }}</el-descriptions-item>
            <el-descriptions-item label="填报人">{{
              ruleForms.userName
            }}</el-descriptions-item>
            <el-descriptions-item label="填报人联系方式">{{
              ruleForms.userFormat
            }}</el-descriptions-item>
            <el-descriptions-item label="申报时间">{{
              ruleForms.declarationTime
            }}</el-descriptions-item>
            <el-descriptions-item label="申报经费">{{ ruleForms.expenditureMoney }}万元</el-descriptions-item>
            <el-descriptions-item label="项目时长">{{ ruleForms.beginTime }}--{{ ruleForms.endTime }}</el-descriptions-item>
            <el-descriptions-item label="项目摘要">{{
              ruleForms.projectAbstract
            }}</el-descriptions-item>
            <el-descriptions-item label="是否涉及医学伦理">{{
              ruleForms.medicalEthics == "true" ? "是" : "否"
            }}</el-descriptions-item>
            <el-descriptions-item label="是否涉及生物伦理">{{
              ruleForms.animalEthics == "true" ? "是" : "否"
            }}</el-descriptions-item>
            <el-descriptions-item label="通知附件"><el-link @click="downloadAppendix(ruleFormd.appendixUrl)">{{
              ruleFormd.appendixName
            }}</el-link></el-descriptions-item>
          </el-descriptions>
        </el-dialog>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  props: { id: undefined },
  data() {
    return {
      ruleForm: {},
      tableData: [],
      projectName: "",
      multipleSelection: [],
      dialogPutVisible: false,
      ruleFormd: [{}],
      ruleForms: [{}],
    };
  },
  created() {
    this.show();
  },
  methods: {
    //项目申报（科研管理员审核页面
    show() {
      let url =
        "api/tb_project_apply_basicinfo/GetBasicInfo?projectName=" +
        this.projectName;
      this.http.post(url, {}, true).then((res) => {
        console.log(res);
        if (res.status) {
          console.log(res.data);
          res.data.forEach((element) => {
            if (element.operate == "") {
              element.operate = [];
            } else {
              element.operate = JSON.parse(element.operate);
            }
          });
        }
        this.tableData = res.data;
        console.log(this.tableData, "this.tableData");
        //this.ProjectTotal = res.data.numCount;
      });
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    dataedit(index, row) {
      //打开弹框显示
      this.dialogPutVisible = true;
      console.log(row.appendixID);
      this.http
        .get("/api/tb_project_apply_basicinfo/GetDetail?id=" + row.appendixID)
        .then((res) => {
          console.log(res);
          //获取基础信息表中的数据
          this.ruleFormd = res.data[0].x;
          //获取附件表中的数据
          this.ruleForms = res.data[0].z;
        });
    },
    //跳转审核页面
    Audit(index, row, id) {
      this.$router.push("/DataVerify?id=" + id + "&stepId=" + row.Field);
    },
    dataedelete(index, row) {
      //判断是否删除这条数据
      if (confirm("确认要删除此数据么？")) {
        this.http
          .post(
            "/api/tb_project_apply_basicinfo/DeleteBasicinfoorAppendix?id=" +
            row.appendixID
          )
          .then((res) => {
            if (res.status == true) {
              //弹出提示信息
              this.$message.success(res.message);
              //刷新页面重新显示
              this.show();
            }
          });
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleExpert(index, row) {
      console.log(index, row);
      alert(111);
    },
    handleBack(index, row) {
      console.log(index, row);
    },
    downloadAppendix(url) {
      //打开外部浏览器地址，下载文件
      window.open(url);
    },
    dataexpert(index, row) {
      console.log(row.projectID);
      this.$router.replace(
        "/reviewExpert?id=" + row.projectID
      );
    },
  },
};
</script>
<style scoped>
.searchName {
  margin-left: 20px;
  margin-top: 5px;
  color: rgb(76, 76, 252);
}

.searchbutton {
  margin-left: 20px;
  margin-top: 5px;
  text-align: right;
}
</style>